<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>${_front_title}</title>
    <link rel="stylesheet" href="${_front_css}/base.css">
	<link rel="stylesheet" href="${_front_css}/home.css">
    <link rel="shortcut icon" href="/static/favicon.ico" />
    <link rel="stylesheet" href="${_front_css}/account/account.css">
    <link rel="stylesheet" href="${_front_css}/account/account-card.css">
    <script type="text/javascript" src="${_front_js}/jquery.min.js"></script>
   
</head>

<body>
    <!-- 头部 开始 -->
		<#include "../base/top.ftl" />
	<!-- 头部 结束 -->
    <div class="member">
        <div class="memberLeft">
            <div class="title">我的账户</div>
            <#include "./base.ftl"/>
        </div>
        <div class="memberRight info">
            <div class="box">
                <ul class="tab_menu">
                    <li class="current">银行卡管理</li>
                </ul>
                <div class="tab_box">
                    <div class="">
                        <div class="myhome_content tab_content clearfix">
                            <div class="myhome_tx clearfix">
                                <div class="card-title">新增银行卡</div>
                                <ul>
                                    <li><span>开户银行：</span>
                                        <select name="subbranch" id="subbranch" style="width: 167px;height: 36px;border: 1px solid #ddd;">
			                                <option value="-1">请选择</option>
			                                <#list bankMap as item>  
										         <option value="${item.code!}">${item.name!}</option>  
											</#list>
			                            </select>
                                        <span class="tishi">选择您的开户银行名称</span>
                                    </li>
                                    <li><span>开户城市：</span>
                                        <select name="bankPro" id="province" style="width: 167px;height: 36px;border: 1px solid #ddd;">
		                                    <option value="-1">请选择</option>
											<#list oneLevelCitys as onLevelCity>
	                            				<option value="${onLevelCity.code}">${onLevelCity.city}</option>
	                                		</#list>
		                                </select>
                                        <select name="cityId" id="city" style="width: 167px;height: 36px;border: 1px solid #ddd;">
		                                    <option value="-1" selected="selected">请选择</option>
		                                </select>
                                        <span class="tishi">选择您所在的城市</span>
                                    </li>
                                    <li><span>开户支行：</span>
                                        <input type="text" id="sub_subbranch" placeholder="请输入开户支行" class="test1">
                                    </li>
                                    <li><span>银行卡号：</span>
                                    	<input type="text" id="cardNo" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" placeholder="请输入银行卡号" class="test1">
                                        <span class="tishi">输入您的卡号
                                        	<i style="color:red">（只能绑定储蓄银行卡，信用卡不能提现。）</i>
                                        </span>
                                    </li>
                                    <li><span>交易密码：</span>
                                        <input type="password" id="dealpassword" placeholder="请输入交易密码" class="test1">
                                    </li>
                                    <li><span>&nbsp;</span>
                                        <input type="button" value="保存" class="myhome_bnt1">
                                    </li>
                                </ul>
                            </div>
                            <table width="100%" border="0" cellspacing="0" cellpadding="0" class="zh_table">
                                <tbody>
                                    <tr>
                                        <td>开户行</td>
                                        <td>支行</td>
                                        <td>卡号</td>
                                        <td>开户城市</td>
                                        <td>状态</td>
                                        <td>操作</td>
                                    </tr>
                                    <#if (pageInfo?exists & pageInfo.pageList?size>0)>
                        				<#list pageInfo.pageList as model>
                        					<tr>
                        						<input type="hidden" id="userId" value="<#if model.userId?exists>${model.userId}</#if>"/>
                        						<input type="hidden" id="bankId" value=""/>
                        						<td>
                        							<#if model.bankName??>
														${model.bankName}
													</#if>
                        						</td>
                        						<td>
                        							<#if model.subbranch??>
														${model.subbranch}
													</#if>
                        						</td>
                        						<td>
                        							<#if model.cardNo??>
														${model.cardNo}
													</#if>
                        						</td>
                        						<td>
                        							<#if model.provice??>
														${model.provice}
													</#if>
													<#if model.city??>
														${model.city}
													</#if>
                        						</td>
                        						<td>
                        							已绑定
                        						</td>
                        						<td>
                                            		<a href="javascript:" onclick="javascript:saveBankCard('${model.id}')">申请变更</a>
                        							<a href="javascript:" onclick="javascript:unBindBankCard('${model.id}')">删除</a>
                        						</td>
                        					</tr>
                        				</#list>
                        			<#else>
                        				<tr align="center">
		                                    <td colspan="7">暂无数据</td>
		                                </tr>
                        			</#if>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    <!-- 底部 开始 -->
	<#include "../base/foot.ftl" />
	<!-- 底部 结束 -->
	<script type="text/javascript" src="${_front_js}/layer/layer.js" ></script>
	<script type="text/javascript" src="${_front_js}/layer/extend/layer.ext.js" ></script>
	<script type="text/javascript" src="${_front_js}/tabs.js"></script>
    <script type="text/javascript" src="${_front_js}/common.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
    		checkUserAuth();
    	});
    	
    	$("#myBank").click(function(){
			checkUserAuth();
    	});
    	
    	function checkUserAuth(){
    		$.ajax({
	            type: "POST",
	            url:"/user/auth/checkUserAuth",
	            async: false,
	            success: function(result) {
	            	if(result.code != -1){
	            		if(result.code == 2 || result.code == 3){
		            		layer.alert(result.msg, function(index){
		            			layer.close(index);
							    localStorage.setItem("backURL",window.location.href);
		            			window.location.href="/user/account/safe";
							}); 
		            	}else if(result.code == 1){
		            		window.location.href="/login";
		            	}else{
		            		layer.alert(result.msg, function(index){
		            			layer.close(index);
							}); 
		            	}
	            	}
	            }
	        });
    	}
    	
    	$(".myhome_bnt1").click(function(){
    		var provice = $.trim($("#province").find("option:selected").text());
    		var provinceCode = $("#province").val();
    		var city = $.trim($("#city").find("option:selected").text());
    		var cityCode = $("#city").val();
    		var cardNo = $.trim($("#cardNo").val());
    		var subbranch = $("#subbranch").val();
    		var sub_subbranch = $.trim($("#sub_subbranch").val());
    		var dealpassword = $.trim($("#dealpassword").val());
    		var id =$("#bankId").val();

			if(subbranch == -1){
				layer.alert("请选择开户银行！");
				return;
			}
			if(provice.indexOf('请选择')!=-1 || city.indexOf('请选择')!=-1){
				layer.alert("请选择开户城市！");
				return;
			}
			if(sub_subbranch == ""){
				layer.alert("请输入开户支行！");
				return;
			}
			if(cardNo == ""){
				layer.alert("请输入银行卡号！");
				return;
			}
			var regCardNo=/^[0-9]{16,19}$/;
			if(isNaN(cardNo) || !regCardNo.test(cardNo)){
				layer.alert("银行卡号格式错误，请重新输入！");
				return;
			}
			if(dealpassword == ""){
				layer.alert("请输入交易密码！");
				return;
			}
    		$.ajax({
	            type: "POST",
	            url:"/user/submitBankCard",
	            data:{
	            	"id":id,
	            	"bankCode":subbranch,
	            	"subbranch":sub_subbranch,
	            	"provice":provice,
	            	"provinceCode":provinceCode,
	            	"city":city,
	            	"cityCode":cityCode,
	            	"cardNo":cardNo,
	            	"dealPassword":dealpassword
	            },
	            async: false,
	            success: function(result) {
	            	if(result.code == -1){
	            		layer.alert(result.msg, function(index){
						    layer.close(index);
						    window.location.reload();
						});  
	            	}else{
	            		layer.alert(result.msg, function(index){
						    layer.close(index);
		            		if(result.code == 1){
			            		window.location.href="/login";
			            	}else if(result.code == 2 || result.code == 8){
			            		localStorage.setItem("backURL",window.location.href);
			            		window.location.href="/user/account/safe";
			            	}				    
						});  
	            	}
	            }
	        });
    	});
    	
    	<!-- 修改 -->
    	function saveBankCard(obj){
            $.ajax({
	            type: "POST",
	            url:"/user/bankCard",
	            data:{
	            	"id":obj
	            },
	            async: false,
	            success: function(result) {
	            	if(result.code == -1){
	            		$(".button_card").show();
	            		$("#bankId").attr("value",result.entity.id);
	            		$("#cardNo").attr("value",result.entity.cardNo);
	            		$("#sub_subbranch").attr("value",result.entity.subbranch);
	            		$("#province option").eq(0).text(result.entity.provice);
	            		$("#city option").eq(0).text(result.entity.city);
	            		$("#subbranch option").eq(0).text(result.entity.bankName);
	            		$("#subbranch option").eq(0).val(result.entity.bankCode);
	            	}
	            }
	        });
    	}
    	
    	<!-- 解绑 -->
    	function unBindBankCard(obj){
    		if(confirm("确认解绑银行卡吗？")){
    			$.ajax({
		            type: "POST",
		            url:"/user/unBindBankCard",
		            data:{
		            	"id":obj
		            },
		            async: false,
		            success: function(result) {
		            	if(result.code == -1){
		            		layer.alert(result.msg, function(index){
							    layer.close(index);
							    window.location.reload();
							});  
		            	}else{
		            		layer.alert(result.msg, function(index){
							    layer.close(index);
							});  
		            	}
		            }
	        	});
    		}
    	}
    	
	$("#province").change(function(){
		 var code = $.trim($("#province").val());
           $.ajax({
                  type: "POST",
                  datatype:"json",
                  url: '/user/auth/city',
                  data:{code:code},
                  async: true,
                  success: function(result) {
                  		$("#city").html("");
                  		var html = "<option value='"+'-1'+"'>"+'请选择'+"</option>";
                        if(result.code==1){
                        	for(var i = 0;i<result.entity.length;i++ ){
                        		html += "<option value='"+result.entity[i].code+"'>"+result.entity[i].city+"</option>";
                        	}
                        }
                        $("#city").html(html);
                  }
          });
	})
    </script>
</body>

</html>
